<script setup lang="ts">
import { ref } from "vue";
import { useUserAPI } from "@/services/user";
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";

const visible = defineModel("visible");

const artistApplication = ref({
  realName: "",
  idNumber: "",
  phone: "",
  description: "",
});

const userStore = useUserStore();
const userAPI = useUserAPI();

const handleSubmit = async () => {
  try {
    await userAPI.postApplyMusician(userStore.uid);
    ElMessage.success("申请提交成功，请等待审核");
    userStore.isSinger = -1; //  设置为待审核音乐人状态
    visible.value = false;
  } catch (error) {
    ElMessage.error("申请提交失败，请稍后重试");
  }
};
</script>

<template>
  <el-dialog
    v-model="visible"
    width="500px"
    class="artist-application-dialog"
    align-center
    destroy-on-close
  >
    <template #header>
      <div class="text-xl font-bold">音乐人申请</div>
    </template>
    <el-form :model="artistApplication" label-position="top" class="px-6">
      <el-form-item label="真实姓名">
        <el-input
          v-model="artistApplication.realName"
          size="large"
          placeholder="请输入真实姓名"
        />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input
          v-model="artistApplication.idNumber"
          size="large"
          placeholder="请输入身份证号"
        />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input
          v-model="artistApplication.phone"
          size="large"
          placeholder="请输入联系电话"
        />
      </el-form-item>
      <el-form-item label="个人介绍">
        <el-input
          v-model="artistApplication.description"
          type="textarea"
          :rows="4"
          placeholder="请输入个人介绍"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="flex gap-4 px-6">
        <el-button size="large" @click="visible = false">取消</el-button>
        <el-button type="primary" size="large" @click="handleSubmit"
          >提交申请</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
